<template>
  <div
    class="gongrejindutiaodiv1"
    :style="{
      width: getscalepxc(625),
      color: 'white',
      heigth: getscalepxc(13),
      '--epbo': getscalepxc(10),
      '--ebir': getscalepxc(7.5),
      '--epbi': getscalepxc(9.5),
    }"
  >
    <div
      :style="{
        width: '100%',
        position: 'relative',
        height: getscalepxc(18),
        color: '#77D2FF',
        fontSize: getscalepxc(8),
      }"
    >
      <div style="position: absolute; left: 0px">
        <el-button
          type=""
          round
          size="mini"
          style="background-color: #39cd6abb; border: 1px solid #39cd6abb"
          >{{qibeng}}</el-button
        >
        启泵
      </div>
      <div :style="{ position: 'absolute', left: getscalepxc(60) }">
        <el-button
          type=""
          round
          size="mini"
          style="background-color: #e4e26abb; border: 1px solid #e4e26abb"
          >{{yushengwen}}</el-button
        >
        预升温
      </div>
      <div :style="{ position: 'absolute', left: getscalepxc(130) }">
        <el-button
          type=""
          round
          size="mini"
          style="background-color: #e66830bb; border: 1px solid #e66830bb"
          >{{zhengshigongnuan}}</el-button
        >
        正式供暖
      </div>
      <div :style="{ position: 'absolute', right: getscalepxc(0) }">
        <el-button
          type=""
          round
          size="mini"
          style="background-color: #165286; border: 1px solid #165286"
          >{{jieshugongnuan}}</el-button
        >
        结束供暖
      </div>
    </div>
    <commongongrejindutiaobase
      :percentage="pernum"
      color="#e66830bb"
      :text-inside="true"
      :bartype.sync="bartype"
    ></commongongrejindutiaobase>
    <!-- <el-progress :percentage="pernum" color="#F68C7F66" :text-inside="true"></el-progress> -->
    <!-- <el-progress :percentage="50" color="#165286" status="warning"></el-progress> -->
  </div>
</template>
<script>
import dayjs from "dayjs";
import commonmixins from "@/mixins/bigScreen/commonmixins";

import axios from "@/utils/requestdp";

export default {
  name: "commongongrejindutiao",
  mixins: [commonmixins],
  components: {},
  data() {
    return {
      pernum: 50,
      qibeng: "11-01",
      yushengwen: "11-07",
      zhengshigongnuan: "11-15",
      jieshugongnuan: "3-15",
      bartype: 0,
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      axios
        .get(`/heatperiod?year=${dayjs().format("YYYY")}`)
        .then((res) => {
          res.data.map((item) => {
            if (item.periodFlag == 2) {
              this.qibeng = item.periodStartTime;
            }
            if (item.periodFlag == 3) {
              this.yushengwen = item.periodStartTime;
            }
            if (item.periodFlag == 4) {
              this.zhengshigongnuan = item.periodStartTime;
              this.jieshugongnuan = item.periodEndTime;
            }
          });

          let yearstart = "";
          let yearend = "";

          let daysub = dayjs().diff(
            dayjs(dayjs().format("YYYY") + "-01-01"),
            "day"
          );

          if (daysub > 180) {
            yearstart = dayjs().format("YYYY");
            yearend = dayjs().add(1, "year").format("YYYY");
          } else {
            yearend = dayjs().format("YYYY");
            yearstart = dayjs().add(-1, "year").format("YYYY");
          }

          let total = dayjs(yearend + "-" + this.jieshugongnuan).diff(
            dayjs(yearstart + "-" + this.qibeng),
            "day"
          );

          console.log(yearstart);
          console.log(yearend);
          console.log(this.qibeng);

          let now = dayjs().diff(dayjs(yearstart + "-" + this.qibeng), "day");
          this.pernum = Number(((now / total) * 100).toFixed(0));

          if (dayjs().diff(dayjs(yearstart + "-" + this.qibeng), "day") < 0) {
            this.bartype = 0;

          }else if(dayjs().diff(dayjs(yearstart + "-" + this.yushengwen), "day") < 0){
            this.bartype = 1;

          }else if(dayjs().diff(dayjs(yearstart + "-" + this.zhengshigongnuan), "day") < 0){
            this.bartype = 2;
            
          }else if(dayjs().diff(dayjs(yearend + "-" + this.jieshugongnuan), "day") < 0){
            this.bartype = 3;
          }else{
            this.bartype = 0;
          }
          console.log(this.pernum);
          console.log(this.bartype);
        });
    },
  },
};
</script>
<style lang='scss'>
.gongrejindutiaodiv1 {
  // .el-button{
  // }
  .el-progress-bar__outer {
    background-color: #41b3e8bb;
    height: var(--epbo) !important;
  }
  .el-button.is-round {
    color: white;
    // border: 1px solid #0c2d50;
    // background-color: #0c2d50;
    color: #aed2e2;
    font-size: var(--ebir);
  }
  .el-progress-bar__innerText {
    color: white;
    font-size: var(--epbi) !important;
    // display: none;
  }
}
</style>